<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定制</title>
	<link rel="stylesheet" href="../../include/css/public.min.css">
	<link rel="stylesheet" href="../../include/css/iconfont.min.css">
	<link rel="stylesheet" href="../doc-lib/solarized-light.css">
    <link rel="stylesheet" href="../doc-lib/doc.css">
</head>
<body>
    <div class="page-cont">
	    <div class="crumb"></div>
        <div class="page-title">
			<h2>定制</h2>
			<p>定制属于自己的 ARM UI 版本。</p>
		</div>
        <p class="mt05">ARM UI 支持定制功能，通过自定义组件、Sass 变量、项目配置文件等，可定制一份属于自己的 ARM UI 版本。</p>
        <p class="mt05">要实现定制功能，需使用 ARM 的开发包，且搭建好自动化构建环境。具体请参考“指南”中的相关章节。</p>
        <div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 定制组件样式</h4>
			<div class="section-cont">
                <div class="grid-row">
                    <div class="grid-col grid-col-4"><strong>关键文件</strong></div>
                    <div class="grid-col grid-col-8"><strong>描述</strong></div>
                </div>
                <div class="grid-row">
                    <div class="grid-col grid-col-4">
                        <pre><code class="markdown">source/scss/public.scss</code></pre>
                    </div>
                    <div class="grid-col grid-col-8">
                        包含所有模块化组件的样式文件引用，可根据实际需要选用组件，最终将会反映到 public.min.css 文件中。
                    </div>
                </div>
                <div class="grid-row">
                    <div class="grid-col grid-col-4">
                        <pre><code class="markdown">source/scss/_global.scss</code></pre>
                    </div>
                    <div class="grid-col grid-col-8">
                        包含模块化组件的颜色、尺寸变量，可根据实际需要自定义，最终将会反映到 public.min.css 文件中。
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <h4 class="section-title"><i class="iconfont icon-subtraction"></i> 定制脚本</h4>
            <div class="section-cont">
                <div class="grid-row">
                    <div class="grid-col grid-col-4"><strong>关键文件</strong></div>
                    <div class="grid-col grid-col-8"><strong>描述</strong></div>
                </div>
                <div class="grid-row">
                    <div class="grid-col grid-col-4">
                        <pre><code class="markdown">source/js/index.js</code></pre>
                    </div>
                    <div class="grid-col grid-col-8">
                        父级结构的脚本文件（导航事件），可根据实际情况调整，最终将会反映到 index.min.js 文件中。
                    </div>
                </div>
                <div class="grid-row">
                    <div class="grid-col grid-col-4">
                        <pre><code class="markdown">source/js/public.js</code></pre>
                    </div>
                    <div class="grid-col grid-col-8">
                        子页面通用脚本文件（含 jQuery 插件），可根据实际情况调整，最终将会反映到 public.min.js 文件中。
                    </div>
                </div>
            </div>
		</div>
		<div class="section">
            <h4 class="section-title"><i class="iconfont icon-subtraction"></i> 定制图标</h4>
            <div class="section-cont">
				<p>ARM UI 中的图标来自阿里巴巴矢量图标库，如现有图标无法满足需求，可自由定制：</p>
				<ol class="ml20">
					<li>访问阿里巴巴矢量图表库（ <a href="http://www.iconfont.cn" target="_blank">http://www.iconfont.cn</a>）；</li>
					<li>使用 GitHub 或新浪微博帐号登录；</li>
					<li>
						<p>在打开的页面导航栏点击“图标管理 → 我的项目”，然后点击新建项目按钮，如下图：</p>
						<img src="../doc-lib/images/guide_new_project.png" alt="new project">
					</li>
					<li>
						<p>填写项目名称和描述，其余请默认，如下图：</p>
						<img src="../doc-lib/images/guide_new_pro_dialog.png" alt="new project dialog">
					</li>
					<li>
						<p class="mt10">点击导航“图标库 → 所有图标库”显示平台所有图标库，或根据关键词搜索特定的图标。在需要的图标上点击添加入库按钮（购物车图标），如下图：</p>
						<img src="../doc-lib/images/guide_add_icon.png" alt="guide add icon">
					</li>
					<li>
						<p class="mt10">待需要的图标挑选完毕后，点击页面右上方的购物车图标，弹出当前已挑选的所有图标，确认无误后点“添加至项目”按钮，并确定，如下图：</p>
						<img src="../doc-lib/images/guide_settle.png" alt="settle">
					</li>
					<li>
						<p class="mt10">回到“我的项目”，点击“查看在线链接”按钮，然后点击生成，如下图：</p>
						<img src="../doc-lib/images/guide_pro_mgr.png" alt="project mgr">
					</li>
					<li>
						<p class="mt10">打开 ARM UI 项目 source 目录下的 <code>project.json</code> 文件，将上一步生成的在线链接地址复制到 iconfont.url 的属性值里，如下图：</p>
						<img src="../doc-lib/images/guide_icon_url.png" alt="icon url">
					</li>
					<li class="mt10">定位到 ARM UI 根目录，运行 <code>gulp font</code> 启动字体任务，将自动从上述地址拉取对应的字体及样式表资源到本地。详情请移步 <a href="build.html">组件 → 自动化构建</a>。</li>
				</ol>
            </div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 定制文件构建</h4>
			<div class="section-cont">
				<p>对 <strong>project.json</strong> 文件的配置除可定制项目图标外，还可定制文件构建。文件构建由项目基本信息、模板文件和导航配置三部分共同生成。</p>
				<p class="mt05"><strong>1. 项目基本信息</strong></p>
				<p class="mt05">定位到 source/project.json 文件，通过修改如下几个属性可定制项目基本信息：</p>
				<pre class="mt05"><code class="json">"project": {
    "name": "ARM UI",  // 项目名称（简称）
    "title": "ARM UI 前端框架",  // 项目标题名称（全称）
    "logo": "include/images/logo.png",  // 项目 logo（还用于生成浏览器地址栏小图标）
    "entry": "index.html"  // 入口文件（主页）
}</code></pre>
				<p class="mt10"><strong>2. 模板文件</strong></p>
				<p class="mt10">定位到 source/models 目录：</p>
				<div class="grid-row">
					<div class="grid-col grid-col-4"><strong>关键文件</strong></div>
					<div class="grid-col grid-col-8"><strong>描述</strong></div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-4">
						<pre><code class="markdown">source/models/index.html</code></pre>
					</div>
					<div class="grid-col grid-col-8">
						入口文件（主页）的模板文件。
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-4">
						<pre><code class="markdown">source/models/frame.html</code></pre>
					</div>
					<div class="grid-col grid-col-8">
						所有子页面（内页）的模板文件。
					</div>
				</div>
				<p class="mt10">上述两个文件中提供四个变量：<code>{{ name }}</code>、<code>{{ title }}</code>、<code>{{ logoPath }}</code> 和 <code>{{ path }}</code>，分别对应项目名称、项目标题名称、项目 logo 路径和当前文件相对路径，前三个变量通过 project.json 中 “项目基本信息”里的配置获取，最后一个根据导航配置自动获取。</p>
				<p class="mt10"><strong>3. 导航配置</strong></p>
				<p class="mt05">定位到 source/project.json 文件，通过配置 nav 数组即可定制导航：</p>
				<pre class="mt05"><code class="json">"nav": [
    {
        "name": "首页",  // 名称
        "icon": "homepage_fill",  // 小图标（填写图标类名）
        "url": "pages/home.html"  // 链接地址
    }, {
        "name": "指南",
        "icon": "flag_fill",
        "base": "pages/guide/",  // 二级导航基准地址
        "subNav": [  // 二级导航内容
            {
                "name": "开始使用",
                "url": "index.html"  // 实际链接地址为：base + url
            }
            ...
        ]
    }
]</code></pre>
			</div>
			<p class="mt10 ml20">上述 3 个项目设置完毕后，通过运行 <code>gulp build</code> 任务，即可在特定目录下生成特定页面文件。</p>
		</div>
    </div>
    <script src="../../include/js/jquery-1.11.3.min.js"></script>
    <script src="../../include/js/public.min.js"></script>
    <script src="../doc-lib/highlight.pack.js"></script>
	<script src="../doc-lib/doc.js"></script>
    <script>
		hljs.initHighlightingOnLoad();
    </script>
</body>
</html>
